<template>
  <div class="register">
    <a class="register-logo" href="/"><img src="@/assets/logo/logo4.png"></a>
    <a class="register-back" href="/">
      <svg-icon class-name="arrow-back-left" icon-class="arrow-back-left" />
      <span class="txt">返回官网</span>
    </a>
    <div class="register-main">
      <el-form ref="registerRef" :model="registerForm" :rules="registerRules" class="register-form">
        <h3 class="title">申请注册信息</h3>
        <el-form-item prop="realName">
          <el-input v-model="registerForm.realName" type="text" size="large" auto-complete="off" placeholder="请输入您的姓名">
            <template #prefix><svg-icon icon-class="login-user" class="el-input__icon input-icon" /></template>
          </el-input>
        </el-form-item>
        <el-form-item prop="mobile">
          <el-input v-model="registerForm.mobile" type="text" size="large" auto-complete="off" placeholder="请输入注册手机号">
            <template #prefix><svg-icon icon-class="icon-phone2" class="el-input__icon input-icon" /></template>
          </el-input>
        </el-form-item>
        <el-form-item prop="yzm" class="relative">
          <el-input size="large" v-model="registerForm.yzm" auto-complete="off" placeholder="请输入验证码"
            @keyup.enter="handleRegister" maxlength="6">
            <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
          </el-input>
          <el-button type="primary" class="register-code" :disabled="isCounting" @click="handleGetCode">
            <span v-if="!isCounting">获取验证码</span>
            <span v-else>重新获取({{ countDown }}s)</span>
          </el-button>
        </el-form-item>
        <el-form-item prop="companyName">
          <el-input v-model="registerForm.companyName" type="text" size="large" auto-complete="off"
            placeholder="请输入企业名称">
            <template #prefix><svg-icon icon-class="icon-qiye" class="el-input__icon input-icon" /></template>
          </el-input>
        </el-form-item>
        <el-checkbox v-model="registerForm.rememberMe" style="margin:0px 0px 25px 0px;">我已阅读并同意<a class="link">《用户协议》</a> 和
          <a class="link">《个人信息保护协议》</a></el-checkbox>
        <el-form-item style="width:100%;">
          <el-button type="primary" class="submit-btn" :loading="loading" size="large"
            @click.prevent="handleRegister">
            <span v-if="!loading">注 册</span>
            <span v-else>注 册 中...</span>
          </el-button>
          <div class="register-footer">
            <div></div>
            <router-link class="link-type"
              :to="'/login?redirect=/project-personnel'"><span>已有账号？</span>立即登录</router-link>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ElMessageBox } from "element-plus"
import { getCode, register } from "@/api/login"

const router = useRouter()
const { proxy } = getCurrentInstance()

const registerForm = ref({
  rememberMe: false,
  realName: "",
  companyName: "",
  mobile: "",
  yzm: "",
})
const countDown = ref(60)
const isCounting = ref(false)
const timer = ref(null)

const registerRules = {
  realName: [
    { required: true, trigger: "blur", message: "请输入您的姓名" },
    { min: 2, max: 20, message: "姓名长度必须介于 2 和 20 之间", trigger: "blur" }
  ],
  companyName: [
    { required: true, trigger: "blur", message: "请输入企业名称" },
    { min: 2, max: 40, message: "企业名称长度必须介于 2 和 40 之间", trigger: "blur" },
  ],
  mobile: [
    { required: true, trigger: "blur", message: "请输入注册手机号" },
    { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" },
  ],
  yzm: [{ required: true, trigger: "change", message: "请输入验证码" }]
}

const loading = ref(false)

function handleRegister() {
  if (!registerForm.value.rememberMe) {
    proxy.$modal.msgError("请先同意《用户协议》和《个人信息保护协议》")
    return
  }

  proxy.$refs.registerRef.validate(valid => {
    if (valid) {
      loading.value = true
      register(registerForm.value).then(res => {
        const realName = registerForm.value.realName
        if (res.code === 200) {
          ElMessageBox.alert("<font color='red'>" + res.data + "</font>", "系统提示", {
            dangerouslyUseHTMLString: true,
            type: "success",
          }).then(() => {
            router.push("/login?redirect=/project-personnel")
          }).catch(() => { })
        }
      }).catch(() => {
        loading.value = false
      })
    }
  })
}

function handleGetCode() {
  if (!registerForm.value.mobile) {
    proxy.$modal.msgError("请输入手机号")
    return
  }
  // 验证码已发送不可点击
  if (isCounting.value) {
    return
  }

  getCode(registerForm.value.mobile).then(res => {
    console.log('getCode res:', res)
    // 获取成功后开始倒计时
    isCounting.value = true
    countDown.value = 60
    timer.value = setInterval(() => {
      countDown.value--
    }, 1000)
  })
}

// 监听倒计时变化
watch(countDown, (val) => {
  if (val === 0) {
    isCounting.value = false
    clearInterval(timer.value)
  }
})

// 组件销毁时清除计时器
onMounted(() => {
  return () => {
    clearInterval(timer.value)
    timer.value = null
  }
})
</script>

<style lang='scss' scoped>
.register {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-image: url("../assets/images/login-background.png");
  background-size: cover;
}

.register-logo {
  position: absolute;
  left: 24px;
  top: 24px;
  z-index: 1;

  img {
    width: 153px;
    height: 53px;
  }
}

.register-back {
  display: flex;
  align-items: center;
  position: absolute;
  right: 24px;
  top: 24px;
  z-index: 1;

  .txt {
    color: #323233;
    font-size: 12px;
    margin-left: 5px;
  }
}

.title {
  color: rgba(51, 51, 51, 1);
  font-size: 36px;
  line-height: 52px;
  margin-bottom: 36px;
  margin-top: 0;
}

.el-input {
  font-size: 16px;
}

.register-main {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 2px 32px rgba(0, 0, 0, 0.08);
  width: 646px;
  padding: 0 65px 0 100px;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.register-form {
  .el-input {
    height: 60px;

    input {
      height: 60px;
      font-size: 16px;
    }
  }

  .input-icon {
    height: 39px;
    width: 16px;
    margin-left: 0px;
  }
}

.register-code {
  font-size: 16px;
  height: 48px;
  position: absolute;
  top: 6px;
  right: 5px;
}

.disabled-code {
  color: #888;
  cursor: default;
}

.el-checkbox {
  color: rgba(161, 161, 161, 1);
  font-size: 16px;

  :deep(.el-checkbox__label) {
    color: rgba(161, 161, 161, 1);
  }
}

.el-form-item--default {
  margin-bottom: 20px;
}

.submit-btn {
  font-size: 20px;
  font-weight: 400;
  height: 60px;
  width: 100%;
}

.link {
  color: #2A82E4;
}

.register-footer {
  display: flex;
  justify-content: space-between;
  flex: 1;
  margin-top: 24px;

  .link-type {
    font-size: 18px;

    span {
      color: rgba(105, 105, 105, 1);
    }
  }
}
</style>
